<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5.5">
        <el-input v-model="inputId" clearable placeholder="修改订单号并输入后回车进行查询"
                  @change="getRepairInfoByID">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="minPrice" placeholder="请选择最小价格">
          <el-option
            v-for="item in minPriceItems"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="0.5" style="margin-top: 10px">
        ~
      </el-col>
      <el-col :span="3">
        <el-select v-model="maxPrice" placeholder="请选择最大价格">
          <el-option
            v-for="item in maxPriceItems"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="fuzzySearch"
          placeholder="模糊搜索房屋描述"
          @change="getHouseRentInfo"
        >
          <el-select style="width: 140px" v-model="selectedType" slot="prepend" placeholder="输入房屋出租类型">
            <el-option v-for="selectItem in selectTypeItems"
                       :key="selectItem"
                       :label="selectItem"
                       :value="selectItem"></el-option>
          </el-select>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary"
                   plain
                   round
                   @click="getHouseRentInfo"
        >{{ bottoninfo }}</el-button>
        <el-button type="primary"
                   plain
                   round
                   @click="clear"
        >清空</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableItems"
      border
      stripe
      style="width: 100%"
      max-height="600px"
    >
      <el-table-column
        type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="出租房屋id">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <br>
            <el-form-item label="房屋所有者名字">
              <span>{{ props.row.hostRoughVo.name }}</span>
            </el-form-item>
            <br>
            <el-form-item label="出租类型">
              <span>{{ props.row.type }}</span>
            </el-form-item>
            <br>
            <el-form-item label="价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <br>
            <el-form-item label="标签">
              <span>{{ props.row.tag }}</span>
            </el-form-item>
            <br>
            <el-form-item label="距离">
              <span>{{ props.row.distance}}</span>
            </el-form-item>
            <br>
            <el-form-item label="面积">
              <span>{{ props.row.area }}</span>
            </el-form-item>
            <br>
            <el-form-item label="客厅数量">
              <span>{{ props.row.livingRoomAmount }}</span>
            </el-form-item>
            <br>
            <el-form-item label="卧室数量">
              <span>{{ props.row.bedroomAmount }}</span>
            </el-form-item>
            <br>
            <el-form-item label="床数量">
              <span>{{ props.row.bedAmount }}</span>
            </el-form-item>
            <br>
            <el-form-item label="卫生间">
              <span>{{ props.row.toiletAmount }}</span>
            </el-form-item><br>
            <el-form-item label="房客数量">
              <span>{{ props.row.roomerAmount }}</span>
            </el-form-item><br>
            <el-form-item label="房屋描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item><br>
            <el-form-item label="详细介绍">
              <span>{{ props.row.intro }}</span>
            </el-form-item><br>
            <span v-for="(value,index) in props.row.pictureUrl.split(',')" :key="index">
            <img :src="value">
          </span>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="出租单号"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="hostRoughVo.name"
        label="房屋所有者名字"
        width="120">
      </el-table-column>
      <el-table-column
        prop="type"
        label="出租类型"
        width="120">
      </el-table-column>
      <el-table-column
        prop="location"
        label="详细地址"
        width="120">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="60">
      </el-table-column>
      <el-table-column
        prop="hostRoughVo.phone"
        label="房东联系方式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="area"
        label="面积(平方)"
        width="120">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="房屋描述"
        width="150">
      </el-table-column>
      <el-table-column
        prop="intro"
        label="详细介绍"
        width="150">
      </el-table-column>
      <el-table-column
        prop="ra_state"
        label="审核状态"
        width="100">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" effect="dark"
                    :type="scope.row.ra_state===1?'success':(scope.row.ra_state==0?'':'danger')"
            >
              {{ scope.row.ra_state===1?'已派单':(scope.row.ra_state===0?'未处理':'被退回') }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.ra_state!==1">
            <el-button @click="showDialog(scope.row.id)" type="text" size="small">通过</el-button>
            <el-button
              :disabled="scope.row.ra_state===-1?true:false"
              type="text"
              size="small"
              @click="dispatchReturn(scope.row.id,scope)"
            >退回</el-button>
            <el-button
              type="text"
              size="small"
              @click="houseRentInfoManage(scope.row)"
            >信息管理</el-button>
          </div>
          <div v-if="scope.row.ra_state===1">
            <el-button
              type="text"
              size="small"
              @click="ShowSearchRepairApply(scope.row.ra_id)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'RentalPersonnelInformationManagement',
  data () {
    return {
      bottoninfo: '查询'
    }
  }

}
</script>

<style scoped>

</style>
